<template>
  <div class="player">
    <audio 
      :src="currentSong.songUrl"
      @timeupdate="timeUpdate"
      @canplay="canPlay"
      @ended="stop"
      ref="audio"
    ></audio>
    <div class="full" v-if="playerType === 'full'">
      <div class="top">
        <i class="el-icon-arrow-down" @click="changeType('mini')"></i>
      </div>
      <div class="full-context">
        <div class="pic">
          <img :src="currentSong.pic" alt="">
        </div>
        <div class="lyric">
          <div class="lyric-list" ref="lyric">
            <div class="lyric-item" v-for="(item, index) in lyricList" :key="index"
              :class="activeIndex === index ? 'activelyric' : ''"
            >
                {{ item }}
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="progress">
          <Progress
            :currentTime="currentTime"
            :duration="duration"
            @changeTime="changeTime"
          />
        </div>
        <div class="control">
          <div class="left">
            {{ currentTime | formatTime(2) }} / {{ duration | formatTime(2) }}
          </div>
          <div class="center">
            <div class="mode">

            </div>
            <div class="prev" @click="changeMusic('prev')">
              <i class="el-icon-caret-left"></i>
            </div>
            <div class="play" @click="play">
              <i class="el-icon-video-play" v-if="isPaused"></i>
              <i class="el-icon-video-pause" v-else></i>
            </div>
            <div class="next"  @click="changeMusic('next')">
              <i class="el-icon-caret-right"></i>
            </div>
            <div class="sound"></div>
          </div>
          <div class="right"></div>
        </div>
      </div>
    </div>
    <div class="mini" v-else>
      <div class="mini-bottom">
          <div class="mini-progress">
            <Progress
              :currentTime="currentTime"
              :duration="duration"
              @changeTime="changeTime"
            />
          </div>
          <div class="mini-control">
            <div class="mini-left">
              <div class="pic" @click="changeType('full')">
                <img :src="currentSong.pic" alt="">
              </div>
              <div class="name-box">
                <div>{{ currentSong.name }}</div>
                <div>-</div>
                <div>{{ currentSong.singer }}</div>
              </div>
            </div>
            <div class="mini-center">
              <div class="mini-mode">
                <div class="mode-logo" @click="handleOpenSelect">
                  <template v-if="playMode === 1">
                    <svg t="1679037130801" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4799" width="24" height="24"><path d="M361.5 727.8c-119.1 0-215.9-96.9-215.9-215.9 0-119.1 96.9-215.9 215.9-215.9 2.3 0 4.6-0.2 6.8-0.6v58.3c0 12.3 14 19.4 23.9 12.1l132.6-97.6c8.1-6 8.1-18.2 0-24.2l-132.6-97.6c-9.9-7.3-23.9-0.2-23.9 12.1v58.1c-2.2-0.4-4.5-0.6-6.8-0.6-39.8 0-78.5 7.9-115 23.4-35.2 15-66.8 36.3-94 63.5s-48.6 58.8-63.5 94c-15.5 36.5-23.4 75.2-23.4 115s7.9 78.5 23.4 115c15 35.2 36.3 66.8 63.5 94s58.8 48.6 94 63.5c36.5 15.5 75.2 23.4 115 23.4 22.1 0 40-17.9 40-40s-17.9-40-40-40zM938.2 396.9c-15-35.2-36.3-66.8-63.5-94s-58.8-48.6-94-63.5c-36.5-15.5-75.2-23.4-115-23.4-22.1 0-40 17.9-40 40s17.9 40 40 40c119.1 0 215.9 96.9 215.9 215.9 0 119.1-96.9 215.9-215.9 215.9-4.1 0-8.1 0.6-11.8 1.8v-60.8c0-12.3-14-19.4-23.9-12.1l-132.6 97.6c-8.1 6-8.1 18.2 0 24.2L629.9 876c9.9 7.3 23.9 0.2 23.9-12.1V806c3.7 1.2 7.7 1.8 11.8 1.8 39.8 0 78.5-7.9 115-23.4 35.2-15 66.8-36.3 94-63.5s48.6-58.8 63.5-94c15.5-36.5 23.4-75.2 23.4-115s-7.8-78.5-23.3-115z" p-id="4800" fill="#ffffff"></path><path d="M512.8 660.6c22.1-0.1 39.9-18.1 39.8-40.2l-1.2-214.1c-0.1-22-18-39.8-40-39.8h-0.2c-22.1 0.1-39.9 18.1-39.8 40.2l1.2 214.1c0.1 22 18 39.8 40 39.8h0.2z" p-id="4801" fill="#ffffff"></path></svg>
                  </template>
                  <template v-else-if="playMode === 2">
                    <svg t="1679037120060" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4347" width="24" height="24"><path d="M361.5 727.8c-119.1 0-215.9-96.9-215.9-215.9 0-119.1 96.9-215.9 215.9-215.9 2.3 0 4.6-0.2 6.8-0.6v58.3c0 12.3 14 19.4 23.9 12.1l132.6-97.6c8.1-6 8.1-18.2 0-24.2l-132.6-97.6c-9.9-7.3-23.9-0.2-23.9 12.1v58.1c-2.2-0.4-4.5-0.6-6.8-0.6-39.8 0-78.5 7.9-115 23.4-35.2 15-66.8 36.3-94 63.5s-48.6 58.8-63.5 94c-15.5 36.5-23.4 75.2-23.4 115s7.9 78.5 23.4 115c15 35.2 36.3 66.8 63.5 94s58.8 48.6 94 63.5c36.5 15.5 75.2 23.4 115 23.4 22.1 0 40-17.9 40-40s-17.9-40-40-40z m576.7-330.9c-15-35.2-36.3-66.8-63.5-94s-58.8-48.6-94-63.5c-36.5-15.5-75.2-23.4-115-23.4-22.1 0-40 17.9-40 40s17.9 40 40 40c119.1 0 215.9 96.9 215.9 215.9 0 119.1-96.9 215.9-215.9 215.9-4.1 0-8.1 0.6-11.8 1.8v-60.8c0-12.3-14-19.4-23.9-12.1l-132.6 97.6c-8.1 6-8.1 18.2 0 24.2L629.9 876c9.9 7.3 23.9 0.2 23.9-12.1V806c3.7 1.2 7.7 1.8 11.8 1.8 39.8 0 78.5-7.9 115-23.4 35.2-15 66.8-36.3 94-63.5s48.6-58.8 63.5-94c15.5-36.5 23.4-75.2 23.4-115s-7.8-78.5-23.3-115z" p-id="4348" fill="#ffffff"></path></svg>
                  </template>
                  <template v-else>
                    <svg t="1679036667642" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3999" width="24" height="24"><path d="M768 763.008V682.666667l213.333333 128-213.333333 128v-89.173334a384 384 0 0 1-298.538667-228.906666L469.333333 620.373333l-0.128 0.256A384 384 0 0 1 116.266667 853.333333H85.333333v-85.333333h30.933334a298.666667 298.666667 0 0 0 274.517333-181.034667L422.912 512l-32.128-74.965333A298.666667 298.666667 0 0 0 116.266667 256H85.333333V170.666667h30.933334a384 384 0 0 1 352.938666 232.746666L469.333333 403.626667l0.128-0.256A384 384 0 0 1 768 174.506667V85.333333l213.333333 128-213.333333 128V260.992a298.666667 298.666667 0 0 0-220.117333 176.042667L515.754667 512l32.128 74.965333A298.666667 298.666667 0 0 0 768 763.008z" p-id="4000" fill="#ffffff"></path></svg>
                  </template>
                </div>
                <div class="select-box" :class="showSelect === true ? 'show-select' : ''" @click="handleCloseSelect">
                  <div @click="changeMode(1)">
                    <svg t="1679037130801" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4799" width="24" height="24"><path d="M361.5 727.8c-119.1 0-215.9-96.9-215.9-215.9 0-119.1 96.9-215.9 215.9-215.9 2.3 0 4.6-0.2 6.8-0.6v58.3c0 12.3 14 19.4 23.9 12.1l132.6-97.6c8.1-6 8.1-18.2 0-24.2l-132.6-97.6c-9.9-7.3-23.9-0.2-23.9 12.1v58.1c-2.2-0.4-4.5-0.6-6.8-0.6-39.8 0-78.5 7.9-115 23.4-35.2 15-66.8 36.3-94 63.5s-48.6 58.8-63.5 94c-15.5 36.5-23.4 75.2-23.4 115s7.9 78.5 23.4 115c15 35.2 36.3 66.8 63.5 94s58.8 48.6 94 63.5c36.5 15.5 75.2 23.4 115 23.4 22.1 0 40-17.9 40-40s-17.9-40-40-40zM938.2 396.9c-15-35.2-36.3-66.8-63.5-94s-58.8-48.6-94-63.5c-36.5-15.5-75.2-23.4-115-23.4-22.1 0-40 17.9-40 40s17.9 40 40 40c119.1 0 215.9 96.9 215.9 215.9 0 119.1-96.9 215.9-215.9 215.9-4.1 0-8.1 0.6-11.8 1.8v-60.8c0-12.3-14-19.4-23.9-12.1l-132.6 97.6c-8.1 6-8.1 18.2 0 24.2L629.9 876c9.9 7.3 23.9 0.2 23.9-12.1V806c3.7 1.2 7.7 1.8 11.8 1.8 39.8 0 78.5-7.9 115-23.4 35.2-15 66.8-36.3 94-63.5s48.6-58.8 63.5-94c15.5-36.5 23.4-75.2 23.4-115s-7.8-78.5-23.3-115z" p-id="4800" fill="#ffffff"></path><path d="M512.8 660.6c22.1-0.1 39.9-18.1 39.8-40.2l-1.2-214.1c-0.1-22-18-39.8-40-39.8h-0.2c-22.1 0.1-39.9 18.1-39.8 40.2l1.2 214.1c0.1 22 18 39.8 40 39.8h0.2z" p-id="4801" fill="#ffffff"></path></svg>
                  </div>
                  <div @click="changeMode(2)">
                    <svg t="1679037120060" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4347" width="24" height="24"><path d="M361.5 727.8c-119.1 0-215.9-96.9-215.9-215.9 0-119.1 96.9-215.9 215.9-215.9 2.3 0 4.6-0.2 6.8-0.6v58.3c0 12.3 14 19.4 23.9 12.1l132.6-97.6c8.1-6 8.1-18.2 0-24.2l-132.6-97.6c-9.9-7.3-23.9-0.2-23.9 12.1v58.1c-2.2-0.4-4.5-0.6-6.8-0.6-39.8 0-78.5 7.9-115 23.4-35.2 15-66.8 36.3-94 63.5s-48.6 58.8-63.5 94c-15.5 36.5-23.4 75.2-23.4 115s7.9 78.5 23.4 115c15 35.2 36.3 66.8 63.5 94s58.8 48.6 94 63.5c36.5 15.5 75.2 23.4 115 23.4 22.1 0 40-17.9 40-40s-17.9-40-40-40z m576.7-330.9c-15-35.2-36.3-66.8-63.5-94s-58.8-48.6-94-63.5c-36.5-15.5-75.2-23.4-115-23.4-22.1 0-40 17.9-40 40s17.9 40 40 40c119.1 0 215.9 96.9 215.9 215.9 0 119.1-96.9 215.9-215.9 215.9-4.1 0-8.1 0.6-11.8 1.8v-60.8c0-12.3-14-19.4-23.9-12.1l-132.6 97.6c-8.1 6-8.1 18.2 0 24.2L629.9 876c9.9 7.3 23.9 0.2 23.9-12.1V806c3.7 1.2 7.7 1.8 11.8 1.8 39.8 0 78.5-7.9 115-23.4 35.2-15 66.8-36.3 94-63.5s48.6-58.8 63.5-94c15.5-36.5 23.4-75.2 23.4-115s-7.8-78.5-23.3-115z" p-id="4348" fill="#ffffff"></path></svg>
                  </div>
                  <div @click="changeMode(3)">
                    <svg t="1679036667642" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3999" width="24" height="24"><path d="M768 763.008V682.666667l213.333333 128-213.333333 128v-89.173334a384 384 0 0 1-298.538667-228.906666L469.333333 620.373333l-0.128 0.256A384 384 0 0 1 116.266667 853.333333H85.333333v-85.333333h30.933334a298.666667 298.666667 0 0 0 274.517333-181.034667L422.912 512l-32.128-74.965333A298.666667 298.666667 0 0 0 116.266667 256H85.333333V170.666667h30.933334a384 384 0 0 1 352.938666 232.746666L469.333333 403.626667l0.128-0.256A384 384 0 0 1 768 174.506667V85.333333l213.333333 128-213.333333 128V260.992a298.666667 298.666667 0 0 0-220.117333 176.042667L515.754667 512l32.128 74.965333A298.666667 298.666667 0 0 0 768 763.008z" p-id="4000" fill="#ffffff"></path></svg>
                  </div>
                </div>
              </div>
              <div class="mini-prev"  @click="changeMusic('prev')">
                <i class="el-icon-caret-left"></i>
              </div>
              <div class="mini-play"  @click="play">
                <i class="el-icon-video-play" v-if="isPaused"></i>
                <i class="el-icon-video-pause" v-else></i>
              </div>
              <div class="mini-next" @click="changeMusic('next')">
                <i class="el-icon-caret-right"></i>
              </div>
              <div class="mini-sound">
                <svg t="1679037296075" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6067" width="24" height="24"><path d="M509.226667 167.722667l-222.442667 184.341333c-16.704 13.866667-43.178667 23.402667-64.896 23.402667H170.730667A42.666667 42.666667 0 0 0 128 418.090667v187.434666c0 23.466667 19.178667 42.624 42.730667 42.624H221.866667c21.802667 0 48.170667 9.536 64.896 23.402667l222.421333 184.32V167.744zM259.541333 704.426667c-9.045333-7.509333-25.770667-13.589333-37.674666-13.589334H170.730667A85.418667 85.418667 0 0 1 85.333333 605.525333v-187.434666A85.333333 85.333333 0 0 1 170.730667 332.8H221.866667c11.776 0 28.629333-6.08 37.674666-13.589333L519.125333 104.106667c18.090667-14.997333 32.746667-8.170667 32.746667 15.402666v784.64c0 23.488-14.677333 30.378667-32.746667 15.402667L259.562667 704.405333z m436.117334-4.821334a21.333333 21.333333 0 1 1-26.026667-33.834666A196.608 196.608 0 0 0 746.666667 509.504c0-57.408-29.269333-112.32-77.482667-151.637333a21.333333 21.333333 0 1 1 26.965333-33.066667C753.792 371.797333 789.333333 438.485333 789.333333 509.504c0 75.370667-35.050667 144.981333-93.653333 190.08z m64 170.666667a21.333333 21.333333 0 1 1-26.026667-33.834667A414.506667 414.506667 0 0 0 896 507.029333c0-121.642667-61.696-237.354667-162.816-319.829333a21.333333 21.333333 0 1 1 26.965333-33.066667C870.698667 244.309333 938.666667 371.776 938.666667 507.029333a457.173333 457.173333 0 0 1-178.986667 363.221334z" fill="#ffffff" p-id="6068"></path></svg>
              </div>
            </div>
            <div class="mini-right">
              {{ currentTime | formatTime(2) }} / {{ duration | formatTime(2) }}
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';
import Progress from '../Progress';
import { getLyric } from '@/service/music'


  export default {
    components: {
      Progress,
    },
    data() {
      return {
        currentTime: '',
        duration: '',
        isPaused: false,
        isNewSong: false,
        timeList: [],
        lyricList: [],
        activeIndex: -1,
        showSelect: false,
      };
    },
    computed: {
      ...mapGetters('player', ['currentSong']),
      ...mapState('player', ['playerType', 'playMode']),
    },
    methods: {
      ...mapMutations('player', ['changeType', 'changeMode']),
      ...mapActions('player', ['changeMusic', 'changeMusicRandom']),
      handleOpenSelect() {
        this.showSelect = true;
      },
      handleCloseSelect() {
        this.showSelect = false;
      },
      play() {
        if (this.$refs.audio.paused) {
          this.$refs.audio.play();
        } else {
          this.$refs.audio.pause();
        }
        this.isPaused = this.$refs.audio.paused;
      },
      timeUpdate() {
        this.currentTime = this.$refs.audio.currentTime;
        const minutes = parseInt(parseInt(this.currentTime) / 60)
        const seconds = parseInt(this.currentTime) % 60
        const time = '' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds)
        const index = this.timeList.findIndex((item) => {
          return item === time;
        })
        if (index === -1) return;
        this.activeIndex = index;
        this.$refs.lyric.style.top = 100 - index * 20 + 'px';
      },
      stop() {
        switch(this.playMode) {
          case 1:
            this.play();
            break;
          case 2:
            this.changeMusic('next');
            break;
          default:
            this.changeMusicRandom();
            break;
        }
      },
      canPlay() {
        this.duration = this.$refs.audio.duration;
        if (this.isNewSong) {
          this.play();
          this.isNewSong = false;
        }
      },
      changeTime(time) {
        this.$refs.audio.currentTime = time;

      },
      async getLyricData() {
        const res = await getLyric(this.currentSong?.mid);
        const { code, result: { lyric } } = res || {};
        if (code) return;
        const reg = /\[(\d{2}:\d{2})\.\d{2}\](.*)/g
        let r = reg.exec(lyric);
        while (r !== null) {
          this.timeList.push(r[1]);
          this.lyricList.push(r[2])
          r = reg.exec(lyric);
        };
      },
    },
    mounted() {
      console.log(this.currentSong);
      this.getLyricData();
      this.play();
    },
    beforeDestroy() {
      this.timeList = [];
      this.lyricList = [];
    },
    filters: {
      formatTime(data, num) {
        const m = parseInt(data / 60);
        const s = parseInt(data % 60, 10);
        const diffM = new Array(num - String(m).length + 1).join('0');
        const diffS = new Array(num - String(s).length + 1).join('0');
        return `${ diffM }${ m }:${ diffS }${ s }`;
      }
    },
    watch: {
      currentSong: {
        deep: true,
        immediate: true,
        handler(val, oldVal) {
          console.log(val, oldVal)
          if (val.mid !== oldVal?.mid) {
            this.isNewSong = true;
            this.timeList = [];
            this.lyricList = [];
            this.getLyricData();
          }
        }
      }
    },
  }
</script>

<style lang="scss" scoped>
.player {
  .full {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 99;
    background-color: plum;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: url(https://img1.baidu.com/it/u=3833933856,2683762883&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1026);
    background-size: contain;
    // filter: blur(5px);
    .top {
      i {
        font-size: 24px;
        height: 30px;
        color: pink;
        margin-left: 20px;
        margin-top: 20px;
        cursor: pointer;
        &:hover {
          color: aquamarine;
        }
      }
    }
    .full-context {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 640px;
      padding: 0 10vw;
      .pic {
        width: 40%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 300px;
          
        }
      }
      .lyric {
        width: 30vw;
        height: 400px;
        overflow-y: scroll;
        position: relative;
        backdrop-filter: blur(5px);
        .lyric-list {
          position: absolute;
          top: 100px;
          left: 7vw;
          transition: top .3s linear;
          .lyric-item {
            width: 100%;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            
          }
        }
      }
      .activelyric {
        background-color: #fff;
        color: pink;
      }
    }

    .bottom {
      .control {
        height: 80px;
        display: flex;
        justify-content: space-between;
        .left {
          flex: 1;
          display: flex;
          align-items: center;
          padding-left: 20px;
          box-sizing: border-box;
          color: #fff;
        }
        .center {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          color: #fff;
          > div {
            margin: 0 5px;
          }
          .play {
            font-size: 30px;
          }
        }
        .right {
          flex: 1;
        }
      }
    }
  }
  .mini {
    position: fixed;
    bottom: 0;
    left: 208px;
    background-color: plum;
    z-index: 99;
    
    width: calc(100% - 208px);
    .mini-control {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px;
      box-sizing: border-box;
      height: 80px;
      .mini-left {
        display: flex;
        align-items: center;
        flex: 1;
        .pic {
          display: flex;
          align-items: center;
          margin-right: 10px;
          img {
            width: 60px;
          }
        }
        .name-box {
          display: flex;
          align-items: center;
          font-size: 12px;
          color: rgb(99, 93, 93);
          div {
            &:nth-of-type(1) {
              font-size: 14px;
              color: #fff;
            }
            &:nth-of-type(2) {
              margin: 0 3px;
            }
          }
        }
      }
      .mini-center {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: #fff;
        > div {
          cursor: pointer;
          margin: 0 5px;
        }
        .mini-mode {
          position: relative;
          display: flex;
          align-items: center;
          .mini-logo {
            display: flex;
            align-items: center;  
            color: #fff;
            }
          .select-box {
            position: absolute;
            bottom: 40px;
            left: -38px;
            background-color: rgba(200, 200, 200, .8);
            width: 100px;
            height: 100px;
            display: none;
            box-shadow: 0 10px 10px  rgba(100, 100, 100, 0.3);
            
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
          }
          .show-select {
            display: flex;
          }
        }
        
        .mini-play {
          font-size: 30px;
          color: aquamarine;
        }
        .mini-sound {
          display: flex;
          align-items: center;
        }
      }
      .mini-right {
        flex: 1;
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>